<template>
    <el-form :model="userForm"  ref="userForm" class="login-form">
        <el-form-item prop="pass">
            <el-input type="password" v-model="userForm.username" placeholder="请输入手机号或用户名"></el-input>
        </el-form-item>
        <el-form-item prop="age">
            <el-input v-model="userForm.password"  placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
            <span style="font-family: 微软雅黑;font-size: 15px;font-weight: bold;margin-right: 10px">记住密码</span>
            <el-switch v-model="userForm.remember"></el-switch>
        </el-form-item>
        <el-form-item>
            <el-button class="login-btn" type="primary" :loading="loginBtnTag" @click="submitForm('userForm')">{{loginBtnMsg}}</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {login} from "@/api/user"
    export default {
        name: "Login",
        data(){
            return {
                userForm: {
                    username: '',
                    password: '',
                    remember: false
                },
                loginBtnTag:false,
                loginBtnMsg:"登录"
            }
        },

        methods: {
            submitForm(userForm) {
                //修改登陆标志
                this.loginBtnTag = true;
                this.loginBtnMsg = "登录中...";
                //ajax 登录请求
                login(userForm).then(res =>{
                    console.log("登录成功...");
                    this.loginBtnTag = false;
                    this.loginBtnMsg = "登录";
                    //状态管理
                    this.$store.dispatch("setUserAction",res.data);
                    this.$router.push("/index")
                }).catch(err=>{
                    console.log(err);
                    console.log("登录失败");
                    this.loginBtnTag = false;
                });
            }
        }
    }
</script>

<style scoped>
    .login-form .login-btn{
        width: 100%;
    }

</style>